I am trying to switch from webpack to angular-cli. However, for some reason, it seems that ngtools / webpack disables AOT with ng2 diagrams, where angluar-cli cannot ...
ERROR in: Unexpected value of 'ChartsModule in D: / Repo / SC-WebApp / WebApp / / node_modules / ng2-charts / bundles / ng2-charts.umd.min.js' is imported by the DashboardModule module in D: / Repos / sc- webapp / WebApp / ui / src / app / dashboard / _dashboard.module.ts. Add a note @NgModule.
I get this error only for AOT builds, it works as expected for non-AOT builds!
However, at the other end of the spectrum, I can get the same project as with ngtools / webpack with and without AOT (but only with ngtools / webpack NOT angular-cli AOT)
Here is an image of the ng2 diagrams in the AoT package via ngtools / webpack.
This could be due to the angular-cli-style 'aliasing'?!?
"compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "./", "paths": { "ng2-charts": [ "../node_modules/ng2-charts/bundles/ng2-charts.umd.min.js" ] },
this was necessary in order for the chart to display correctly in the NON-aot assembly, so I assume it is correct, but maybe this does not work with AOT?
Do I need to somehow include the metadata.json file or soemthing like this?
What is ngtools / webpack that makes angular-cli different here?
Here is the working webpack configuration I used:
resolve: { extensions: ['.ts', '.js'], modules: [ path.resolve('./'), path.resolve('./node_modules') ], alias: { 'ng2-charts/charts/charts': 'node_modules/ng2-charts/bundles/ng2-charts.umd.min.js' //'ng2-dragula': 'node_modules/ng2-dragula/bundles/ng2-dragula.umd.min.js' } }, module: { rules: [ // Ahead of Time Compilation { test: /\.ts$/, loader: '@ngtools/webpack', exclude: [/\.(spec)\.ts$/] }, // AoT requires all files to be loaded { test: /\.html$/, loader: 'html-loader' }, { test: /\.css$/, loader: 'raw-loader' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file-loader', options: { name: '[path][name].[ext]' } } ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'main' }), // Ahead of Time Plugin new aot.AngularCompilerPlugin({ tsConfigPath: path.resolve('./Angular/tsconfig.json'), entryModule: path.resolve('./Angular/_app.module#SmartCommandModule') // Use this setting to turn off AoT //,skipCodeGeneration: true }), // Only load the necessary locales for moment new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|es/) ],
here is the dashboard module code:
import { ChartsModule } from 'ng2-charts'; import { CalendarModule } from 'primeng/components/calendar/calendar'; import { SlickModule } from 'ngx-slick'; @NgModule({ imports: [RouterModule.forChild(dashboardRoutes), CommonModule, FormsModule, SharedModule, ChartsModule, MapModule, CalendarModule, AlarmModule, PatrolModule, SlickModule.forRoot()], providers: [DashboardService, DashboardPDFService, DashboardPDFPatrolService, DashboardAlarmService, DashboardPatrolService, DashboardPlatformService, AlarmOperatorPipe, AlarmPriorityPipe, AlarmDescriptionPipe, DashboardPatrolMapService, AlarmStatePipe, AlarmPlatformPipe, AlarmLOIPipe, PatrolStatusPipe, PatrolRobotDronePipe, PatrolAlarmPriorityPipe, PatrolDisplayNamePipe, PatrolOperatorPipe ], declarations: [Dashboard, AlarmSearchPipe, AlarmOperatorPipe, AlarmPriorityPipe, AlarmDescriptionPipe, AlarmStatePipe, AlarmPlatformPipe, AlarmLOIPipe, DashboardPatrolMap, PatrolSearchPipe, DashboardFilter, DashboardHeader, DashboardAlarm, DashboardPatrol, DashboardSlider, DashboardSearchBox, DashboardAlarmDetails, DashboardAlarmPDF, DashboardPatrolDetails, DashboardPatrolPDF, PatrolSearchPipe, DashboardPatrolMap, PatrolAlarmPriorityPipe, PatrolStatusPipe, PatrolRobotDronePipe, PatrolDisplayNamePipe, PatrolOperatorPipe ], exports: [Dashboard, DashboardAlarmPDF, DashboardPatrolPDF, DashboardPatrolMap] }) export class DashboardModule { }