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.

Sign up for GitHub

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

Jump to bottom

Starter Templates: Add Angular #1467

Open
felipedrumond opened this issue Mar 1, 2025 · 2 comments
Open

Starter Templates: Add Angular #1467

felipedrumond opened this issue Mar 1, 2025 · 2 comments
Labels
contribution welcome

Comments

@felipedrumond
Copy link

Feature Request

Can the Angular become a new template in WXT?
I've tried to use vanilla then install Angular, but without success with help of chatGPT and Claude.

Is your feature request related to a bug?

No - it's related to developer experience.

What are the alternatives?

Additional context
@aklinker1
Copy link
Collaborator

I've tried in the past, but couldn't figure it out. But I have zero experience with angular, so maybe someone with actual angular experience can contribute it?

@st3h3n
Copy link
Contributor

st3h3n commented Mar 7, 2025 •
edited
Loading

I did get it to work:

  1. Install @analogjs/vite-plugin-angular
  2. In your wxt.config.ts:
import angular from '@analogjs/vite-plugin-angular';
export default defineConfig({
  vite: () => ({
    plugins: [
      angular({
        transformFilter: (_, id) => !(id.endsWith('background.ts') || id.endsWith('content.ts')),
      }),
    ],
  }),
})

The filter makes the Angular compiler ignore files that are not relevant for Angular. Otherwise the compiler will just delete these files in the output but they are necessary for WXT.

  1. You will probably have to adjust your tsconfig.json if you're using TypeScript.
  2. JIT compilation does not work in extensions so make sure it's AOT by e.g. using platformBrowser rather than using platformBrowserDynamic in your main.ts.
  3. Add import 'zone.js'; to your main.ts and import 'path/to/polyfills.ts'; should you need polyfills.
  4. Your entrypoint needs to be an index.html, it cannot be main.ts. So add <script type="module" src="./main.ts"></script> to the <body> of index.html.
  5. You also have to add your styles.css/less/scss to the <head> of index.html. E.g. <link rel="stylesheet" href="./styles.less">.
  6. To get HMR to work properly you need to add <base href="/popup.html"> as well. This would be for the popup entrypoint. Other entrypoints need their respective links, e.g. options.html for the options entrypoint.
  7. If you're using routing you have to use the hash router: RouterModule.forRoot(routes, { useHash: true }).
  8. I haven't setup the environment variable stuff yet but there is a guide here.

I probably forgot some stuff but this should help you out.

@aklinker1 aklinker1 removed the feature label Mar 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution welcome
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@aklinker1 @st3h3n @felipedrumond