CODEWITHSUNDEEP
webpackaotangular5angular-aot
ymrs
ymrs

Reputation: 161

Angular 5 webpack 3 aot builds

we recently upgraded to angular 5 from angular 4. We also upgraded to webpack 3. Managed to get our aot builds to work by getting rid of main.aot.ts and pointing the to main.ts directly but we are unable to load the build. We see 'AppService is not defined' error. Can someone please help?

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.js

module.exports = {
bail: true,
resolve: {
    extensions: ['.js', '.ts'],
    alias: {
        jquery: "jquery/src/jquery"
    }
},

entry: {
    'app': './app/main.ts',
},
output: {
    path: './compiled',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
},

plugins: [
    new ngToolsWebpack.AngularCompilerPlugin({
        tsConfigPath: './tsaotconfig.json',
        entryModule: __dirname + '/../app/app.module#AppModule'
    }),
  ]
}

error

Uncaught ReferenceError: AppService is not defined
at e.ctorParameters (http://localhost:4200/bundle/app.js:1:915567)
at e._ownParameters (http://localhost:4200/bundle/app.js:1:60309)
at e.parameters (http://localhost:4200/bundle/app.js:1:60727)
at e.parameters (http://localhost:4200/bundle/app.js:1:1250184)
at e._getDependenciesMetadata (http://localhost:4200/bundle/app.js:1:1439376)
at e._getTypeMetadata (http://localhost:4200/bundle/app.js:1:1438259)
at e.getNonNormalizedDirectiveMetadata (http://localhost:4200/bundle/app.js:1:1431328)
at e._getEntryComponentMetadata (http://localhost:4200/bundle/app.js:1:1442081)
at http://localhost:4200/bundle/app.js:1:1441836
at Array.forEach (native)

Upvotes: 1

Views: 913

Answers (1)

tomalex
tomalex

Reputation: 1271

I was able to make a sample angular5 app build in AOT

https://github.com/tomalex0/angularx-aot-jit

I created a sample angular5 app which generates AOT and JIT, might not be in same structure as yours but works

https://github.com/tomalex0/angularx-aot-jit

This commit difference will give better picture of what all i changed while updating to angular5 https://github.com/tomalex0/angularx-aot-jit/commit/1435fddf1a6336f05e63f30062cb4cd2d0ba771f

tsconfig-aot.json for angular5

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "outDir": "aot",
    "skipLibCheck": true,
    "rootDir": "."
  }
}
  1. No longer needs "angularCompilerOptions": {"genDir": "aot" }|
  2. in webpack config make entry as entry: './js/ng2/app/main.jit.ts'
  3. in webpack const { AngularCompilerPlugin } = require('@ngtools/webpack'); and in plugins as new AngularCompilerPlugin({tsConfigPath: './tsconfig-aot.json', entryModule: ...})

Upvotes: 1

Related Questions