AOT broken

[litzebauer]

When building app using library created by generator, AOT compiler can't find HTML templates. I believe HTML templates and style files need to be inlined before running 'ngc'

[litzebauer]

See http://www.dzurico.com/how-to-create-an-angular-library/

[gonzofish]

I think we can do this without Gulp. The Material2 JS file that does the actual replacement of templateUrl -> template and styleUrls -> styles is not Gulp-specific:

https://github.com/angular/material2/blob/master/scripts/release/inline-resources.js

[gonzofish]

I'm super close on this...maybe tomorrow night. Basically your hunch was right, we need to copy over the files into the dist directory...

[gonzofish]

Got half the problem solved--doing an inline replace. There needs to be a step before that where we copy HTML & SCSS files into the correct dist directories, then compile the SCSS, then do an inline replace using those files...

[gonzofish]

https://github.com/angular/material2/blob/master/tools/gulp/util/task_helpers.ts

[litzebauer]

@gonzofish This library does what we're trying to do: https://github.com/swimlane/ngx-datatable

[gonzofish]

Big shoutout to the Angular team for suggesting inlining templates & styles but not having a solution to do.

[litzebauer]

I'm planning on implementing this based on ngx-datatable approach early next week unless you plan on working it. I need it now

[gonzofish]

Remember that this file is already doing some of the heavy lifting...we just needed the SCSS + HTML processed before finishing:

https://github.com/gonzofish/angular-library-set/blob/master/commands/initial/templates/tasks/inline-resources.js

[gonzofish]

I think I might've done it. I've got it working locally. I was able to ng build --prod and ng serve --aot -o with no problem...

The fixes were this:

• Intermediate step of copying all files from src -> build
• Creating a tsconfig.build.json that works out of build
• Having inline-resources work on the build directory
• Having webpack.build.js work on the build directory and use tsconfig.build.json
• Update the sourcemaps from what is produced by ngc so they are relative
• Changing the build NPM script to: node ./tasks/copy-build && node ./tasks/inline-resources && ngc -p tsconfig.build.json && node ./tasks/update-sourcemaps

So the order in the build is:

1. Copy to build
2. Inline resources in *.ts files in build
3. Run ngc using the tsconfig.build.json file
4. Update the source maps in dist

I'll push the library change tomorrow and publish Monday

[litzebauer]

Awesome! Make sure you set the preTagVersion step in package.jaon to build aot

[gonzofish]

For now, at least, I don't think the preTagVersion step needs to be changed since we're defaulting to an AOT-compatible build.

I'll have to add UMD and < ES2015 support in the next couple weeks, but this effectively closed.

[gonzofish]

It's all released on NPM and on here as 1.0.0-alpha.5...feels like it's pretty close to a real 1.0.0 release.

[gonzofish]

I suggest removing angular-library-set and installing the new package name angular-librarian to get the latest and greatest.

This includes a small fix to processing SASS for AOT and a CLI

[tommueller]

I still have a problem with this. Importing a SASS-file from node_modules does not work.

I import it like this @import '~package/dist/scss/imports'; which works well with ngl serve, but not with ngl build: Stacktrace:

Error: File to import not found or unreadable: ~package/dist/scss/imports.
Parent style sheet: stdin
    at Object.module.exports.renderSync (/home/tom/workspace_angular/ui-elements/node_modules/node-sass/lib/index.js:439:16)
    at getMiniContents (/home/tom/workspace_angular/ui-elements/tasks/inline-resources.js:76:25)
    at styles: [.urls.map (/home/tom/workspace_angular/ui-elements/tasks/inline-resources.js:64:26)
    at Array.map (native)
    at content.replace (/home/tom/workspace_angular/ui-elements/tasks/inline-resources.js:63:35)
    at RegExp.[Symbol.replace] (native)
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at inlineStyle (/home/tom/workspace_angular/ui-elements/tasks/inline-resources.js:61:13)
    at reduce (/home/tom/workspace_angular/ui-elements/tasks/inline-resources.js:51:29)

[gonzofish]

Hi @tommueller -

Is ~package/dist/scss/imports a 3rd party package?

[tommueller]

Yes it is an installed node_module (~).

[gonzofish]

Thank you, I'll give this a look

[gonzofish]

@tommueller I think this may be related to using webpack-node-externals. We use this library to prevent external libraries from getting bundled into the distribution.

Basically, when you build your library, you don't want to compile in any external libraries but, instead, want the consumer to specify those libraries. The reason for doing this is so that we don't duplicate 3rd-party libraries.

Are you doing the @import in a component? From the looks of it you might be. Try moving either moving the @import into the examples/styles.scss (I do this myself). Or, the more complicated way, add the directory to the whitelist for nodeExternals() in webpack/webpack.build.js as described on the webpack-node-externals page

If you need anymore help, I'll try my best.

[tommueller]

@gonzofish thanks a lot for looking into this. I use the import in other packages in the example, which works fine, yes.

In this project I want to import the scss-file into the components css, because the scss contains our global scss-variables, that I would like to use within the component.

I did add the npm-package to nodeExternals-whitelist, but error still occurs. From where it happens I think it has more to do with the inlineStyle methods, but I do not really get what's happening there anyway ;)

Thanks for your help and time!

[gonzofish]

No problem, I'll reclose this, but ope another issue and try to give it a more thorough look

New issue is #37