Angular ngtools/webpack (AOT) does not generate anything

224 Views Asked by At

I am going to use Angular platform-server (which used to be Univeral in Angular 2)

As you might know, you can use ngc to compile your app using AOT compiler, but I'm since I have some scss/sass files I can't use that, the other way is to use ngtools/webpack which does the same thing.

And unfortunately, there is no official documentation for platform-server (server-side rendering, aka Universal), but I found this work-in-progress doc here, and I followed that, but when I run webpack it does not generate the expected aot directory.

Here is my webpack:

const ngtools = require('@ngtools/webpack');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      path.join(__dirname, 'src/uni/app-server.module.ts'),
      path.join(__dirname, '/src/uni/universal-server.ts')
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  target: 'node',
  output: {
    path: path.join(__dirname, '/src/dist'),
    filename: 'server.js'
  },
  plugins: [
    new ngtools.AotPlugin({
      tsConfigPath: './tsconfig-uni.json',
      entryModule: './src/app/app.module#AppModule'
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/, use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader"
      }]
      },
      {test: /\.css$/, loader: 'raw-loader'},
      {test: /\.html$/, loader: 'raw-loader'},
      {test: /\.ts$/, loader: '@ngtools/webpack'}
    ]
  }
}

and this is my typescript config for this app:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "./src/uni/app-server.module.ts",
    "./src/uni/universal-server.ts"
  ],

  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

and I do expect that returns something and generate the aot directory for me! but it fails and return this error:

WARNING in ./node_modules/express/lib/view.js
79:29-41 Critical dependency: the request of a dependency is an expression

ERROR in ./src/uni/universal-server.ts
Module not found: Error: Can't resolve '../../aot/src/uni/app-server.module.ngfactory' in '/home//website/src/uni'
 @ ./src/uni/universal-server.ts 7:0-89
 @ multi ./src/uni/app-server.module.ts ./src/uni/universal-server.ts

ERROR in self is not defined

ERROR in /home/website/src/uni/universal-server.ts (7,40): Cannot find module '../../aot/src/uni/app-server.module.ngfactory'.
0

There are 0 best solutions below