Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: webpack plugin to support AoT natively #2333

Merged
merged 1 commit into from
Sep 28, 2016
Merged

Conversation

hansl
Copy link
Contributor

@hansl hansl commented Sep 24, 2016

No description provided.

@googlebot
Copy link

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

@hansl
Copy link
Contributor Author

hansl commented Sep 24, 2016

Both @robwormald and I are Google employees and therefore agree to the CLA.

this.lazyRoutes = lazyModules.reduce((lazyRoutes: any, lazyModule: any) => {
lazyRoutes[`${lazyModule}.ngfactory`] = path.join(
path.resolve(process.cwd(), this.angularCompilerOptions.genDir),
'app', lazyModule + '.ngfactory.ts'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i realized this is hardcoded and would fail for anything other than app - should be I guess the relative path between the ngfactory directory and the app's root.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.


// Super simple TS transpiler loader for testing / isolated usage. does not type check!
export function ngcLoader(source: string) {
const plugin = this._compilation._ngToolsWebpackPluginInstance as NgcWebpackPlugin;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be fine for now and once we drop webpack v2. I'm not sure when we are going to start giving deprecation warnings though for trying to access _compilation.

cc @sokra when he gets back from vacation. Maybe we need to have a way to supress warnings of these deprecations of this._compilation being unavailable from loaders on a per-plugin basis. That way this usage is acceptable for now, but in the future we can tail it off.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really want to make a point that we need access to compilation in many cases, inside the loaders.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or at least access to plugins, yes.




export class WebpackResourceLoader implements ResourceLoader {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I haven't looked at ResourceLoader I don't really know, but since this replaces angular2-template-loader and family, we probably are going to end up with some sad folks because they can't use sass/less/styl inside of components. But, at the cost of AoT, first pass with room to refactor, its justifiable. Just means there is a lot more responsibility on the ResourceLoader to handle all these things.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If that is the case I would suggest making AOT a separate option for build because I do see that breaking a LOT of peoples builds.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@TheLarkInn I don't know what you're talking about, this was a requirement from the design phase. This resource loader compiles the resources asked for the component and as such will use the loaders.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup it was misunderstanding until I loaded it and tried myself. It makes perfect sense what you are doing.

Copy link
Member

@TheLarkInn TheLarkInn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course the regex but you said you were going to get to that.

{ test: /\.scss$/, loaders: ['raw-loader', 'sass-loader'] },
{ test: /\.css$/, loader: 'raw-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.ts$/, loader: '@ngtools/webpack' }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We thinking about changing name of loader for the future? Not really worried but I'm sure theres some post merge 🚲 shedding to be done haha.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess since this is the test app, its really not a big deal at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not thinking of changing it, but we could. What were you thikning of?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure yet, this is fine.

Copy link
Member

@TheLarkInn TheLarkInn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@deebloo
Copy link
Contributor

deebloo commented Sep 28, 2016

You guys are killing it! Looking forward to this very much

Also adding a new package, webpack, which is a plugin and loader for
webpack that adds support for AoT.

It is behind a `--aot` flag in the CLI that is supported by build and
serve.
@googlebot
Copy link

CLAs look good, thanks!

@hansl hansl merged commit d296778 into angular:master Sep 28, 2016
@ginsleepy
Copy link

Does this work with lazy loading?
It says "Cannot find module 'app/about/about.module.ngfactory'"

it is not generating chunk.js file either. Also I cannot find any class related to the Module in main.bundle.js

@rolandoldengarm
Copy link

How would I use this? There's no documentation in the commits as far as I can see?

@shprink
Copy link

shprink commented Sep 29, 2016

@rolandoldengarm use --aot option

JJayet pushed a commit to JJayet/angular-cli that referenced this pull request Oct 2, 2016
Also adding a new package, webpack, which is a plugin and loader for
webpack that adds support for AoT.

It is behind a `--aot` flag in the CLI that is supported by build and
serve.
deebloo pushed a commit to deebloo/angular-cli that referenced this pull request Oct 3, 2016
Also adding a new package, webpack, which is a plugin and loader for
webpack that adds support for AoT.

It is behind a `--aot` flag in the CLI that is supported by build and
serve.
@fkolar
Copy link

fkolar commented Oct 6, 2016

While looking at this push: d296778

Does it mean it will be offically supported in the next version of Angular-cli version 17?

Unless somebody wants to pull master ?

thanks,
-fk

@achimha
Copy link

achimha commented Oct 9, 2016

Is there any documentation available? I've been trying to get it to work for some time now. It doesn't build my lazily loaded routes and complains about the ngfactory files not found.

Are there any changes for bootstrapping the app?

@filipesilva
Copy link
Contributor

@achimha all changes needed should be done in memory.

We don't yet have documentation but basically you can use the --aot flag in build/serve and... that should be all really. There might still be a few bugs, though. See this label for listing: https://github.com/angular/angular-cli/issues?q=is%3Aopen+is%3Aissue+label%3A%22feature%3A+aot%22

@hansl hansl deleted the aot branch November 2, 2016 18:01
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet