angular-update-guide VS universal

update.angular.io *

Hello, i work as a software developer and these days we got a project with the angular in the version 7, one of my tasks is to migrate from 7 to more recent versions, the ideal is the 17. I am trying to follow the step-by-step guide from here:https://update.angular.io/ to go from v7.2 to v8 but i cant even do that. I dont have familiarity with Angular,started to study last week because of this project i mainly work as a backend or with react/next, could you tell what could be the best approach?

Recently, I found myself in charge of upgrading our Angular application from version 12 to 15. In my current role, which I've held for just over a year, most of my focus has been on the backend, and I hadn't even touched the frontend apps until now. I've got to be honest; this upgrade process turned out to be a tougher nut to crack than I initially thought. It's not a knock on the Angular team's Angular Update Guide, though; they did a solid job. The real challenge came from the fact that we had a bunch of custom-made components that didn't quite follow the best practices playbook.

I really recommend the Angular update tool which you can find here: https://update.angular.io

I would like to update Angular from version 5.0 to version 6.1. The instructions at https://update.angular.io/ suggest using ng update @angular/core to update. However this updates directly to version 7 instead of version 6.

Make sure to use https://update.angular.io/ for the upgrade steps and do the upgrade by 1 major version at a time, test if everything works, make a commit and then go for the next version. You may want to go up.

> Every version essentially breaks the previous one.

This is simply not true. It might have been true in the early Angular v2 days, but since v6 or so, updates are relatively trivial.

https://update.angular.io has your back extremely well. The trick is to ensure whatever third party libs you're using have also been updated, otherwise you're application may break.

CLI has improved over the years, enabling smooth migrations between Angular versions. Check out https://update.angular.io/

Just go to https://update.angular.io/ and follow the instructions

Going to the source code of the CommonEngine we have this:

Angular executes applications in the browser and renders pages in the DOM by default. This default method of rendering in the client comes with disadvantages like poor performance and lack of visibility for search engine crawlers. Luckily, Angular allows us to opt-in for server-side rendering (SSR) through Angular Universal, its official SSR solution.

Example rules based on Angular Universal's gotchas:

About standalone support there's this issue in angular/universal and yes, it is supported now 🥳 Tomorrow I'll try making it work in local

Actually I notice in the last few days they might have done a fix for it = https://github.com/angular/universal/issues/1795

export function app(): express.Express { const server = express(); const distFolder = join(BROWSER_FILES_BASE_PATH, 'angular'); const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index'; // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine) server.engine( 'html', ngExpressEngine({ bootstrap: AppServerModule, }) ); server.set('view engine', 'html'); server.set('views', distFolder); server.use( '/browser', express.static(join(BROWSER_FILES_BASE_PATH, 'remix'), { immutable: true, maxAge: '1y', }) ); server.get( '/remix*', createRequestHandler({ build: require('../build/server/remix'), }) ); // Example Express Rest API endpoints // server.get('/api/**', (req, res) => { }); // Serve static files from /browser server.get( '*.*', express.static(distFolder, { maxAge: '1y', }) ); // All regular routes use the Universal engine server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }], }); }); return server; }

I've located the module that already deals with the GET requests = https://github.com/angular/universal/blob/main/modules/common/src/transfer_http.ts So I've made my own interceptor and replaced the GETs mentioed on lines 75 and 95, however it doesn't seem to work. Only thing I can see is the original code references BrowserTransferStateModule which is crossed out. Do I need to replace that with something else?

Do you inject a token that is provided by SSR? Even though standalone has not reached ExpressEngine, but if you have the root AppModule and the root AppComponent non standalone, you can still use provideHttpClient. To inject a server provided string (specifically, the serverUrl), you can use inject function like this: