AOT Compile Failing with Material Modules - angular

I'm getting multiple errors but they're all similar to this:
ERROR in ./node_modules/#angular/material/button/typings/index.ngfactory.js
Module build failed: Error: Invalid name: "#angular/material/button"
at ensureValidName (C:\path\node_modules\normalize-package-data\lib\fixer.js:335:15)
at Object.fixNameField (C:\path\node_modules\normalize-package-data\lib\fixer.js:215:5)
at C:\path\node_modules\normalize-package-data\lib\normalize.js:32:38
at Array.forEach (<anonymous>)
at normalize (C:\path\node_modules\normalize-package-data\lib\normalize.js:31:15)
at final (C:\path\node_modules\read-package-json\read-json.js:411:5)
at then (C:\path\node_modules\read-package-json\read-json.js:160:5)
at ReadFileContext.<anonymous> (C:\path\node_modules\read-package-json\read-json.js:332:20)
at ReadFileContext.callback (C:\path\node_modules\graceful-fs\graceful-fs.js:78:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
# ./src/components/shared/confirm-delete/confirm-delete.component.ngfactory.js 4:0-96
# ./src/components/desktop/base/base.module.ngfactory.js
# ./$$_lazy_route_resource lazy
# ./node_modules/#angular/core/esm5/core.js
# ./src/main.aot.ts
The errors only seem to be occurring in modules that are child modules since the material button is being used in other components without producing this error. I suspect I've done something silly with my imports but I can't figure out what it is that would cause this error in only the child modules. The angular compiler version is 5.2.10.
Imports -
import { MatInputModule } from '#angular/material/input';
import { MatCardModule} from '#angular/material';
import { MatButtonModule } from '#angular/material/button';
import { MatDialogModule} from '#angular/material';
import { MatIconModule } from '#angular/material/icon';
It works fine with webpack and doing 'npm run server'. It's only when doing AOT compilation does the problem present.

You can import angular material with:
import {
TooltipComponent,
MatDialogModule,
MatTooltipModule,
MatMenuModule
} from '#angular/material';
#NgModule({
exports: [
MatDialogModule,
MatTooltipModule,
MatMenuModule
]
})
export class MaterialModule { }
#NgModule({
imports: [
MaterialModule
],
bootstrap: [AppComponent],
})
export class AppModule { }
(Encapsulating inside another ngModule makes it easier to separate it from your AppModule)

Related

Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule'

Getting this new error out of nowhere as soon as I added ng2-eonasdan-datetimepicker. Maybe this is the wrong file contents, but I can't narrow it down.
It says there is something wrong with this line in my index file:
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
here's my app.module.ts: When I comment out the "ng2-eonasdan-datetimepicker" import lines it works...
//Modules
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { MaterialModule } from '#angular/material';
import { RouterModule } from '#angular/router';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule, JsonpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { JobListComponent } from './jobs/job-list.component';
import { TESTpg1 } from './test/TESTpg1.component';
import { TESTpg2 } from './test/TESTpg2.component';
import { ErrorComponent } from './error/error.component';
import { JobDetailsComponent } from './jobs/job-details.component';
import { CreateJobComponent } from './jobs/create-job.component';
import { gMap } from './maps/gmap.component';
import { DayScheduleComponent } from './calendar/day-schedule.component';
//Router List
import { appRoutes } from './app.routes';
//FireBase
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from './data/firebase.config';
//DateTimePicker
import { A2Edatetimepicker, DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker';
import { DateTimePicker } from './calendar/dateTimePicker.component';
#NgModule({
imports: [ MaterialModule.forRoot(),
BrowserModule,
RouterModule.forRoot(appRoutes),
FormsModule,
ReactiveFormsModule,
HttpModule,
JsonpModule,
AngularFireModule.initializeApp(firebaseConfig),
A2Edatetimepicker
],
declarations: [ AppComponent,
DashboardComponent,
JobListComponent,
JobDetailsComponent,
TESTpg1,
TESTpg2,
ErrorComponent,
gMap,
CreateJobComponent,
DayScheduleComponent,
DateTimePicker,
DateTimePickerDirective
],
bootstrap: [ AppComponent ],
providers: [ ]
})
export class AppModule {}
Error:
Error: (SystemJS) Unexpected value 'undefined' imported by the module 'AppModule'
Error: Unexpected value 'undefined' imported by the module 'AppModule'
at SyntaxError.BaseError [as constructor] (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:1595:29)
at new SyntaxError (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:1793:18)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:18126:42)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:18105:51)
at JitCompiler._loadModules (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27288:66)
at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27248:54)
at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27214:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:8496:29)
at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:8471:25)
Error loading http://localhost:3000/app/js/main.js
at SyntaxError.BaseError [as constructor] (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:1595:29)
at new SyntaxError (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:1793:18)
at eval (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:18126:42)
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:18105:51)
at JitCompiler._loadModules (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27288:66)
at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27248:54)
at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/#angular/compiler/bundles/compiler.umd.js:27214:23)
at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:8496:29)
at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/#angular/core/bundles/core.umd.js:8471:25)
Error loading http://localhost:3000/app/js/main.js
systemjs:
'jquery': 'npm:jquery/dist/jquery.js',
'moment': 'npm:moment/moment.js',
'eonasdan-bootstrap-datetimepicker': 'npm:eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js',
'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js'
UPDATE:
I removed the references to A2Edatetimepicker and the error went away! The reason I had A2Edatetimepicker at all was because I get red squiggly lines under DateTimeDirective, but not A2EdateTimeDirective so I thought it was a newer name for the module or something. BUT now I'm back to THIS PROBLEM because of this.....
Update 2: FIXED!
Followed the steps below and then....
Changed SystemJS:
'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker'
app.module.ts:
import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/dist/datetimepicker.directive';
#NgModule({
declarations: [ DateTimePickerDirective ]
})
It works! :D
Thank you so much!!!
In order to use ng2-eonasdan-datetimepicker, your application requires a few things.
install via npm with npm install ng2-eonasdan-datetimepicker --save
import {DateTimePickerDirective} from 'ng2-eonasdan-datetimepicker'; into your app.module
add to your declarations declarations: [ App, DateTimePickerDirective ]
you must import Jquery
you must import moment
and lastly you may have to map you application to the location... 'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js',
here is my plunker with the proper installation and mappings of the import https://plnkr.co/edit/lYHLHhPsU7o5z3CEeerQ?p=preview
also here is the officail doc for importing https://www.npmjs.com/package/ng2-eonasdan-datetimepicker
Edit:
Focus on the config.js in the plunker
'ng2-eonasdan-datetimepicker': 'npm:ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js',
'jquery': 'npm:jquery#2.2.4',
'moment': 'npm:moment',
EDIT...AGAIN
hover over your red squigly error. Read the path name provide from DateTimePickerDirective, now look at the last part of the path name, you are probably looking at dist/datetimepicker.MODULE you need to remap it to look at datetimepicker.DIRECTIVE
Final Edit
ok so here is the final break down of everything....
ng2-eonasdan-datetimepicker is broken down into two items. it has a MODULE and a Directive, here is the node_module/ng2-eonasdan-datetimepicker/dist file for proof...
by default it point to the MODULE in order to change it you need to open ng2-eonasdan-datetimepicker package.json and change it to point to the Directive...
so Navigate to node_modules/ng2-eonasdan-datetimepicker/package.json change lines 92 and 111 from "dist/datetimepicker.module.js" to "dist/datetimepicker.directive.js" and "dist/datetimepicker.module.d.ts" to "dist/datetimepicker.directive.d.ts". Then remove your your import from your project and re-import it for it to pick up the change, restart your app and it should work.

ERROR: #angular/material/material has no exported member 'MdButtonModule'

Error below arose after upgrading from #angular/material 2.0.0-beta.11 to 2.0.0-beta.12:
Module #angular/material/material has no exported member 'MdButtonModule'.
Typescript-code:
import { MdButtonModule } from '#angular/material';
What happened?
ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts
(4,3): Module
'"c:/dev/my-proj/node_modules/#angular/material/material"' has no
exported member 'MdButtonModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (5,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdCardModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (6,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdCheckboxModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (7,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdIconModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (8,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdOptionModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (9,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdProgressSpinnerModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (10,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdSelectModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (11,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdSidenavModule'. ERROR in
c:/dev/my-proj/src/app/app-material/app-material.module.ts (12,3):
Module '"c:/dev/my-proj/node_modules/#angular/material/material"' has
no exported member 'MdToolbarModule'. ERROR in Error: MdButtonModule
is not an NgModule
at _getNgModuleMetadata (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:140:15)
at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:109:26)
at c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce (native)
at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:128:10)
at c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce (native)
at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:128:10)
at Object.listLazyRoutesOfModule (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (c:\dev\my-proj\node_modules\#angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (c:\dev\my-proj\node_modules\#ngtools\webpack\src\plugin.js:207:44)
at _donePromise.Promise.resolve.then.then.then.then.then (c:\dev\my-proj\node_modules\#ngtools\webpack\src\plugin.js:443:24)
You have to include MatButtonModule instead of MdButtonModule. You will also have to update the prefix in your template i.e. md-button should now be mat-button. To update the prefix in your entire app, follow the guidelines in this Prefix Updater.
Since 2.0.0-beta.12 the Md prefix has been removed and you should use Mat prefix everywhere. From the CHANGELOG of 2.0.0-beta.11:
For beta.11, we've made the decision to deprecate the "md" prefix
completely and use "mat" moving forward. This affects all class names,
properties, inputs, outputs, and selectors (CSS classes were changed
back in February). The "md" prefixes will be removed in the next beta
release.
And from the CHANGELOG of 2.0.0-beta.12:
Breaking Changes
All "md" prefixes have been removed.
See this working StackBlitz demo with individual material modules and using Mat prefix.
‎
Replace import-directive with
import { MatButtonModule } from '#angular/material';
The MdSomethingModule naming-convention was deprecated in beta.11, and in beta.12 it was completely replaced by MatSomethingModule.
Prior to Angular Material 2 Beta 3, there was a global MaterialModule that could be imported in the app module to make the components available. The downside to that is that tree-shaking is not efficient enough to remove all the unused code.
MaterialModule has therefore been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. Here’s what your module can look like:
import { NgModule } from '#angular/core';
import {
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
} from '#angular/material';
#NgModule({
imports: [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
],
exports: [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule
]
})
export class MaterialModule {}
You’ll then import this module in the root app module.
Import MaterialModule and add it to your imports. You’ll also need to import the necessary for animations in your module. Your app module (e.g.: app.module.ts) will look a little bit like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You can find more information on using angular material here https://alligator.io/angular/angular-material-2/
Use Mat prefix instead of Md.
For example
import { MatButtonModule, MatCheckboxModule } from '#angular/material'
was working, but import { MdButtonModule, MdCheckboxModule } from '#angular/material' get error
replace Mat* with Md* for 2.0.0-beta.11
replace Md* with Mat* see deprecation for 2.0.0-beta.12

Errors while using Angular-material2

I just begin to use Anuglar-material2 in my project, however, I just cannot import any component correctly. After I import some material modules in my app.module.ts, I'm getting errors like following:
uncaught Error: Unexpected value 'MdButtonModule' imported by the module 'AppModule'. Please add a #NgModule annotation.
at syntaxError (compiler.es5.js:1690)
at compiler.es5.js:15383
at Array.forEach (<anonymous>)
at CompileMetadataResolver.webpackJsonp.../../../compiler/#angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15366)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26796)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26769)
at JitCompiler.webpackJsonp.../../../compiler/#angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26698)
at PlatformRef_.webpackJsonp.../../../core/#angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4535)
at PlatformRef_.webpackJsonp.../../../core/#angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4521)
at Object.../../../../../src/main.ts (main.ts:11)
here's my app.module.ts
import 'hammerjs';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { SearchModule } from './search/search.module';
import { PostModule } from './post/post.module';
import { UserModule } from './user/user.module';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import {MdButtonModule, MdCheckboxModule} from '#angular/material';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavTopComponent } from './nav-top/nav-top.component';
import { AuthService } from './core/auth.service';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
NavTopComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MdButtonModule,
MdCheckboxModule,
BsDropdownModule.forRoot(),
SearchModule,
PostModule,
UserModule,
AppRoutingModule
],
exports: [
],
providers: [AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }
I did exactly every steps that included in official documentations of Material2.
Thanks a lots for your kind advice!
But I just solve this problem by deleting the whole node_modules folder and reinstall all packages using npm install.
When I run ng serve again, such error just disappeared. I don't know the reason, but hope this can help others who may have the same problem!
BTW, my Angular version is 4.0, Angular-cli version is 1.2.1 and Angular-material version is 2.0.0
Thanks again!

Error with Ionic2 RC0 loading external modules

In Ionic 2 RC0, I have a problem with angular2-text-mask "1.0.1", I think this is a problem with AoT and most of the external modules though.
In dev mode, I got this error:
bundle dev failed: Module /root/path/node_modules/angular2-text-mask/dist/angular2TextMask.js does not export TextMaskModule (imported by /root/path/src/app/app.module.ts)
So I fixed this overriding rollup.config.js
commonjs({
namedExports: {
'node_modules/angular2-text-mask/dist/angular2TextMask.js': ['TextMaskModule']
}
}),
But I have a problem when trying to build it. So in prod mode:
ngc: Error: Unexpected value 'TextMaskModule' imported by the module 'AppModule'
My app.module code
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { TextMaskModule } from 'angular2-text-mask';
import { MyApp } from './app.component';
#NgModule({
imports: [
IonicModule.forRoot(MyApp),
FormsModule,
TextMaskModule
],
declarations: []
})
export class AppModule {}
Any help would be greatly appreciated.

Angular2 app won't work

Hey I have a very tiny angular (2.1.1) app with a module and a component. Everything was working fine, until I got this error :
error_handler.js:53 TypeError: jit_selectOrCreateRenderHostElement5 is not a function
at _View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:13:16)
at _View_AppComponent_Host0.System.register.context_1.execute.AppView.create (http://localhost:9000/assets/lib/angular__core/src/linker/view.js!transpiled:138:33)
at _View_AppComponent_Host0.System.register.context_1.execute.DebugAppView.create (http://localhost:9000/assets/lib/angular__core/src/linker/view.js!transpiled:348:56)
at ComponentFactory.create (http://localhost:9000/assets/lib/angular__core/src/linker/component_factory.js!transpiled:170:48)
at ApplicationRef_.bootstrap (http://localhost:9000/assets/lib/angular__core/src/application_ref.js!transpiled:455:52)
at eval (http://localhost:9000/assets/lib/angular__core/src/application_ref.js!transpiled:364:101)
at Array.forEach (native)
at PlatformRef_._moduleDoBootstrap (http://localhost:9000/assets/lib/angular__core/src/application_ref.js!transpiled:364:54)
at eval (http://localhost:9000/assets/lib/angular__core/src/application_ref.js!transpiled:328:39)
at e.invoke (http://localhost:9000/assets/lib/zone.js/dist/zone.min.js:1:14497)
I did try to rollback all my latest changes and more, and it didn't fix anything.
I decided then to go back to the simplest possible app, but still unsucesfully :
app.module:
// ANGULAR DEPENDENCIES
import { NgModule} from '#angular/core'
import { BrowserModule } from '#angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from "#angular/forms"
import { HttpModule } from "#angular/http"
// COMPONENTS
import { AppComponent } from "./app.component"
#NgModule({
declarations: [ // directives and components
AppComponent
],
imports: [ // modules, constants and routes
BrowserModule,
ReactiveFormsModule,
FormsModule,
HttpModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
And app.component:
import { Component } from "#angular/core"
#Component({
selector: "app",
template: `'lol'`
})
export class AppComponent {
}
my html is basically just <app></app>
Any idea what this error is about, I am very confused, especially since everything was working a couple hours ago without any problem.
EDIT:
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic'
import { AppModule } from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)
I am not sure but it looks like something happened with your angular components. Delete your "node_modules" directory, then reinstall everything with:
npm install
The problem came from the angular2-cookie library, indeed the version 1.2.4 was broken.

Resources